<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
    <!--
        form标签:表单标签,用于提交数据
        action属性:设置表单提交的位置
        提交表单时,一般都配合一个提交按钮
        表单收集数据一般都是用input标签,并且必须要加上name属性,否则数据提交不了
            type属性标志不同的功能的文本框
                text: 普通文本框
                password: 密码文本框
                radio: 单选框(多个单选框存在时,需要使用name属性相同的值,绑定为一组,才能实现单选功能)
                    可以搭配label标签使用,使用时,需要单选框加上id属性,并且label标签的for属性写入id的值,这样当我们点击label标签的值时,也可以联动选中单选框
                    单选框提交数据时,需要注意,必须给单选框加上value属性,否则提交数据时,选中的单选框提交的值是on
                    可以使用checked属性,可以让单选框默认被选中
                checkbox: 多选框(使用的规则和单选框几乎一致)
                date: 日期文本框
                file: 文件文本框
            placeholder属性:占位文本,不输入内容默认显示,输入内容自动消失
            maxlength属性:限制输入的最大字符长度
            value属性:设置默认值
            readonly属性:只读(只允许读取不允许修改)
        select标签: 下拉选框
            下拉选框的选项使用option标签
    -->
    <form action="http://www.tmooc.cn" target="_blank">
        用户名:<input type="text" name="username" placeholder="请输入您的姓名..." maxlength="5" value="老安" readonly>
        <br>
        密码:<input type="password" placeholder="请输入密码..." name="pwd">
        <br>
        性别:
        <input type="radio" name="gender" id="r1" value="boy" checked>
        <label for="r1">男</label>
        <input type="radio" name="gender" id="r2" value="girl">
        <label for="r2">女</label>
        <br>
        爱好:
        <input type="checkbox" name="hobby" value="cy">抽烟
        <input type="checkbox" name="hobby" value="hj">喝酒
        <input type="checkbox" name="hobby" value="tt" checked>烫头
        <br>
        生日:<input type="date" name="birthday">
        <br>
        帅照:<input type="file" name="pic">
        <br>
        所在地:
        <select name="city">
            <option value="bj">北京</option>
            <option value="sh">上海</option>
            <option value="gz">广州</option>
            <option value="sz">深圳</option>
        </select>
        <br>
        <input type="submit" value="input提交">
        <button type="submit">button提交</button>
        <br>
        <input type="reset" value="input重置">
        <button type="reset">button重置</button>
        <br>
        <input type="button" value="input自定义按钮">
        <button type="button">button自定义按钮</button>
    </form>
</body>
</html>